<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/themes/icon.css"
	rel="stylesheet">
	<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
	
<title>Insert title here</title>

</head>

<script type="text/javascript">
	$(function() {
		//默认对话框是关闭的
		$('#updataFood').dialog('close');
		//配置修改表单
		$("#upFood").form({
			url:'${pageContext.request.contextPath}/updataFood',
			success:function(data){
				 if(data=="1"){
					$('#updataFood').dialog('close');
					$("#upFood").form('clear');
					$.messager.alert('我的消息','更新成功','info',function(){
						$('#foodMsg').datagrid('reload');
					});
				 }else{
					 
				 }
			}
		})
		
		
		
		//默认增加的对话框是关闭的
		$('#adddataFood').dialog('close');
		//配置增加表单
		$("#addFood").form({
			
			url:'${pageContext.request.contextPath}/adddataFood',
			success:function(data){
				 if(data=="1"){
					$('#adddataFood').dialog('close');
					$("#addFood").form('clear');
					$.messager.alert('我的消息','更新成功','info',function(){
						$('#foodMsg').datagrid('reload');
					});
				 }else{
					 
				 }
			}
		})
		
		
		
		
		//配置搜索框
		$('#searchFood').searchbox({
			searcher : function(value, name) {
				var uname = value;
				$('#foodMsg').datagrid('reload', {
					searchname : uname
				});
			}
		});
		
		
		
		//配置数据表格,显示数据，名字叫“findFood”
		$('#foodMsg').datagrid({
			url:'${pageContext.request.contextPath}/findFood',
			columns : [ [ {
				field : 'checked',
				checkbox : true,
				width : 150
			}, {
				field : 'foodid',
				title : '菜品编号',
				width : 150,
				hidden : true
			}, {
				field : 'foodname',
				title : '菜品姓名',
				width : 150
			}, {
				field : 'foodprice',
				title : '菜品价格',
				width : 150,
				align : 'right'
			}, {
				field : 'foodgenre',
				title : '菜品种类',
				width : 150,
				align : 'right'
			},{field:'foodimg',
				title:'菜品图片',
				width:150,height:80,
				align:'left',
				formatter:function(value, rec){//使用formatter格式化刷子
					return "<img style=\"height: 80px;width: 150px;\" src=\"/upload"+value+"\"/>";

					}}, ] ],
			pagination : true,
			toolbar : [ {
				iconCls : 'icon-add',
				text : '新增',
				handler : function() {
					
					$('#adddataFood').dialog('open');
					var food = fo[0];
					 $('#addFood').form('load',food);		
				}
			}, '-', {
				iconCls : 'icon-remove',
				text : '删除',
				handler : function() {
					
					var fo = $("#foodMsg").datagrid('getSelections');
					
					if(fo.length ==0){
						$.messager.alert('提示','请选择一条数据');	
						
					}else{
						var ids=new Array();
							for(var i=0;i<fo.length;i++){
								ids.push(fo[i].foodid);
								alert(ids);
							}
							$.ajax({
								type:"post",
								url:'${pageContext.request.contextPath}/deleteFood?ids='+ids,
							    success:function(data){
							    	$.messager.alert('提示','删除成功');
							    	$("#foodMsg").datagrid('reload');
							    }
								
							})
							
						}
					}
					
					
				
			
			}, '-', {
				iconCls : 'icon-edit',
				text : '修改',
				handler : function() {
					var fo = $("#foodMsg").datagrid('getSelections');
					if (fo.length != 1) {
						$.messager.confirm('提示', '请选择一条数据', function(r) {
							if (r) {
								$("#foodMsg").datagrid('unselectAll');
							}
						})
					} else {
						$('#updataFood').dialog('open');
						var food = fo[0];
						 $('#upFood').form('load',food);

					}
				}
			} ],
			striped : true,
			rownumbers : true
		});
	})
	//配置更新表单提交事件
	function updataForm() {
		$("#upFood").form('submit');
		
	}
	//配置增加表单提交时间
	
	function adddataForm(){
		$("#addFood").form('submit');
		
	}
	
	//配置删除表单提交事件
	function deletedataForm(){
		$("#delFood").form('submit');
	}
	
</script>

<body>


<!-- 查询 -->
<input id="searchFood" class="easyui-searchbox"
		data-options="prompt:'输入菜品名称查询信息',width:150">
		
		<!-- 表名称叫做foodMsg -->
	<table id="foodMsg"></table>




	<!-- 修改的对话框 -->
	<div id="updataFood" class="easyui-dialog" title="更新菜品信息"
		style="width: 400px; height: 450px;" data-options="modal:true" margin-top: 200px;>
		<form id="upFood" method="post" enctype="multipart/form-data">
			<div style="margin-bottom: 20px;display: none;">
				<span>菜品id</span>
				<input class="easyui-textbox" name="foodid" style="width: 100%;">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品名称</span>
				<input class="easyui-textbox" name="foodname" style="width: 100%"
					data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品价格</span>
				<input class="easyui-textbox" name="foodprice" style="width: 100%"
					data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品种类</span>
				<input class="easyui-textbox" name="foodgenre"
					style="width: 100%; height: 60px"
					data-options="">
			</div>
			
		
			<div style="margin-bottom: 20px">
				//菜品展示，即菜品的图片显示
				<span>菜品展示</span>
				<input class="easyui-filebox" style="width:300px" name="foodimg">
			</div>
		</form>
		<div style="text-align: center; padding: 5px 0">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="updataForm()" style="width: 80px">提交</a> 
		</div>
	</div>
	
	

		<!--增加的对话框  -->
	<div id="adddataFood" class="easyui-dialog" title="增加菜品信息"
		style="width: 400px; height: 450px;" data-options="modal:true" margin-top: 200px;>
		<!-- 配置增加表单 -->
		<form id="addFood" method="post" enctype="multipart/form-data">
			<div style="margin-bottom: 20px;display: none;">
				<span>菜品id</span>
				<input class="easyui-textbox" name="foodid" style="width: 100%;">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品名称</span>
				<input class="easyui-textbox" name="foodname" style="width: 100%"
					data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品价格</span>
				<input class="easyui-textbox" name="foodprice" style="width: 100%"
					data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品种类</span>
				<input class="easyui-textbox" name="foodgenre"
					style="width: 100%; height: 60px"
					data-options="">
			</div>
			
			//菜品展示，即菜品的图片显示
			<div style="margin-bottom: 20px">
				<span>菜品展示</span>
				<input class="easyui-filebox" style="width:300px" name="foodimg">
			</div>
			
		</form>
		<div style="text-align: center; padding: 10px 0;">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="adddataForm()" style="width: 70px">提交按钮</a> 
		</div>
	</div>
	
</body>
</html>